<template>
  <div class="person">
    <h2>一辆{{ car.brand }}车，价值{{ car.price }}万</h2>
    <button @click="changePrice">修改汽车的价格</button>
    <hr />
    <h2>游戏列表</h2>
    <ul>
      <li v-for="g in games" :key="g.id">{{ g.name }}</li>
    </ul>
    <button @click="changeFirstGameName">修改第一个游戏名称</button>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
// 1. 数据
//  1.1 对象类型响应式数据
let car = reactive({ brand: '奔驰', price: 100 })
//  1.2 数组类型响应式数据
let games = reactive([
  { id: 'game01', name: '王者荣耀' },
  { id: 'game02', name: '原神' },
  { id: 'game03', name: '火影忍者' }
])

console.log(car)

// 方法
function changePrice() {
  car.price += 10
}

function changeFirstGameName() {
  games[0].name = '黑神话-悟空'
}
</script>

<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}

button {
  margin: 0 5px;
}

li {
  font-size: 20px;
}
</style>
